{{response.files.append(URL(r=request,c='static',f='jquery.dataTables.min.js'))}}
{{response.files.append(URL(r=request,c='static',f='demo_table.css'))}}
{{extend 'layout.html'}}
<script>
jQuery(document).ready(function(){
   jQuery('.smarttable').dataTable();
});
</script>

{{if person:}}
<h1>Todo Task concerning {{=link_person(person)}}</h1>
{{=button('calendar for '+person.name,'calendar',person.id)}}
{{else:}}
<h1>All Todo Task</h1>
{{pass}}
{{=button('full calendar','calendar')}}
[<a href="#nil" onclick="jQuery('#form').slideToggle();">toggle</a>]
<div id="form">
<h2>New Task</h2>
{{=form}}
</div>

<br /><br />
<table class="smarttable">
<thead>
  <tr>
     <th>Created On</th><th>Type</th><th>Title</th>
     <th>Start/Stop</th><th>Action</th>
  </tr>
</thead>
<tbody>
{{for task in tasks:}}
<tr>
<td>{{=task.created_on}}</td>
<td>{{=task.task_type}} {{=task.person.name if task.person else ''}}</td>
<td>{{=task.title}}</td>
<td>{{=task.start_time}}<br/>
{{=task.stop_time}}</td>
<td>
{{=button('view','view_task',task.id)}}
{{=button('edit','edit_task',task.id)}}
</td>
</tr>
{{pass}}
</tbody>
</table>
